<template class="parent">
  <div class="child">
    <div style="width: 400px; margin-top: 100px">
      <h1 style="text-align: center; margin-bottom: 30px">数据自助</h1>
      <el-form :model="user" :rules="rules" size="large" ref="ruleFormRef">
        <el-form-item prop="name">
          <el-input v-model="user.name" :prefix-icon="User"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="user.password" :prefix-icon="Lock" show-password/>
        </el-form-item>
        <el-form-item prop="ip">
          <el-input v-model="user.ip" :prefix-icon="Location" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="path" placeholder="选择打开路径">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
import {ElNotification} from "element-plus";
import router from "../router/index.js";
import {User, Lock, Location} from '@element-plus/icons-vue'
import md5 from 'js-md5'
import request from "../request.js";
const ss = getCurrentInstance()?.appContext.config.globalProperties.$path
const path = ref(ss)

// 获取URL中的查询参数
const urlParams = new URLSearchParams(window.location.search);
// 获取名为"ip"的查询参数的值
const ip = urlParams.get('ip');
// 现在ip变量中存储了从URL中获取的IP参数的值
//const path = ref("/data")
const user =reactive({
    ip:ip
})
const options = [
  {
    value: "/bigdata/gjq/word",
    label: "/bigdata/gjq/word",
  },
  {
    value: "/data",
    label: "/data",
  },
  {
    value: "/home/user",
    label: "/home/user",
  },
  {
    value: "/",
    label: "/",
    // disabled: true,
  },
]

const rules = reactive({
  username:[
    {required:true, message:'请输入用户名', trigger:'blur'}
  ],
  password:[
    {required:true, message:'请输入密码', trigger:'blur'}
  ],
  ip:[
    {required:true, message:'请输入ip', trigger:'blur'}
  ]
})

const admin = reactive({
  name: getCurrentInstance()?.appContext.config.globalProperties.$username,
  password: getCurrentInstance()?.appContext.config.globalProperties.$password
})

const login = () => {
  //const pass = CryptoJS.MD5(user.password).toString();
  const pass = md5(user.password);
    request.post("/login",user).then(res=>{
      console.log(res)
      if(res == "1"){
        ElNotification.success("登录成功")
        sessionStorage.setItem('username', JSON.stringify(admin.name))
        sessionStorage.setItem('path', JSON.stringify(path.value))
        router.push("/SftpHome")
      }else{
        ElNotification.error("用户名密码错误")
      }
    })
  // if(user.name !== admin.name){
  //   ElNotification.error("用户名错误")
  // }else if(pass !== admin.password){
  //   ElNotification.error("密码错误")
  // }else {
  //
  //   ElNotification.success("登录成功")
  //   sessionStorage.setItem('username', JSON.stringify(admin.name))
  //   sessionStorage.setItem('path', JSON.stringify(path.value))
  //   // localStorage.setItem('username', JSON.stringify(admin.name))
  //   request.post("/login",user).then(res=>{
  //     router.push("/SftpHome")
  //   })
  //   // router.push("/SftpHome")
  // }
}
</script>

<style scoped>

.child {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.parent {
  position:relative;
}

</style>